<template>
  <div class="newsBox">
                    <h1>私募股权优质项目推荐</h1>
                    <div>
                        <div class="productDetali"  v-for="(item,index) in productlist" :key="index">
                             <nuxt-link target="_blank" :to="'/product/'+ item.pid">{{item.name}}</nuxt-link>
                              <el-row :span="10" class="productrow">
                                <el-col :span="12">投资领域: {{item.investDirect}}</el-col>
                                <el-col :span="12">预期年化收益: {{item.yearEarningsRate}}%</el-col>
                              </el-row>
                            <p>产品亮点：{{item.coreHighlights}}</p>
                        </div>
                    </div>
                </div>
</template>
<script>

export default {
  props: {
    productlist:{
      type:Array,
      default:function(){
        return []
      }
    }
  }
};
</script>
<style scoped>
.newsBox{
    overflow: hidden;    
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    background: white;
    margin-top: 10px;
}
.newsBox h1{
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    color: #cd9c54;
    border-bottom: 1px solid #ccc;
}
.productDetali{
    margin: 20px 0;
}
.productDetali a{
    display: inline-block;
    width: 100%;
    font-size: 20px;
    color: #333;
    font-weight: bolder;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.productDetali P{
    padding-bottom: 20px;
    border-bottom: 1px dashed #e6e6e6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.productrow{
    margin: 20px 0;
    font-size: 16px;
    color: #333;
}
</style>
